var shapes = [];

//propriétés des lignes /largeur et longueur/

var density = 2.5;

var shapeHeight = 64;

// variable deux couleurs permettant le dégragdé 

var shapeColor1;

var shapeColor2;

​

//liste aléatoire de couleurs

let liste1 = [

  "red",

  "yellow",

  "blue",

  "purple",

  "orange",

  "rgb(173,132,58)",

  "#2196F3",

  "rgb(225,0,255)",

  "rgb(0,255,50)",

  "rgb(83,209,143)",

  "pink",

  "black",

  "white",

  "rgb(255,0,205)",

];

let liste2 = [

  "cyan",

  "magenta",

  "blue",

  "purple",

  "orange",

  "rgb(173,132,58)",

  "#2196F3",

  "rgb(225,0,255)",

  "rgb(0,255,50)",

  "rgb(83,209,143)",

  "pink",

  "black",

  "white",

  "rgb(255,0,205)",

];

​

​

​

​

  //identité de l'objet

//point de départ de l'objet

var newShape;

let state = 0;

//info création du cadre

function setup() {

  createCanvas(800, 800);

  noFill();

  // par rapport à la variable des couleurs> pioché dans les listes de randomcolor

  shapeColor1 = color(random(liste1));

  shapeColor2 = color(random(liste2));

}

//info création du cadre

function draw() {

  background(255);

// "pour chaque fontion shape" recommencer un objet

  shapes.forEach(function (shape) {

    shape.draw();

  });

  //action de l'objet 

  if (newShape) {

//positionement de la souris sur le cadre permettant de calculer le possitionement des pixels    

    newShape.x2 = mouseX;

    newShape.y2 = mouseY;

//taille de la forme = var ShapeHeight/évoqué au début du code/

    newShape.h = shapeHeight;

    newShape.draw();

  }

  //temps structuration /différentes étapes du codes/

  if(millis()<5000){

    state =1

  }

  if (millis() > 5000) {

    state = 2;

  }

  if (millis() > 10000) {

    state = 3;

  }

   if (millis() > 15000) {

    state = 4;

  }

   }

​

// souris fonction/début du "clique"/ (élément central du dessin)=calcul des propriétés visible à l'écart par le positionement  de la souris/ ex: souris à y200-x10/ 

function mousePressed() {

  newShape = new Shape(

    pmouseX,

    pmouseY,

    mouseX,

    mouseY,

    shapeHeight,

    shapeColor1,

    shapeColor2

  );

}

// souris fonction/fin du "clique"/retour à une nouvelle forme / retpur au début du codes 

function mouseReleased() {

  shapes.push(newShape);

  newShape = undefined;

}

// corespondance de la fonction keyPressed utilisé précédament pour déterminé le deut et la fin d'un dessin d'un dégradé + indiction lié au clavier

function keyPressed() {

// indication pour sauvegarder le dessin 

  if (key == "s" || key == "S") saveCanvas(gd.timestamp(), "png");

​

}

​

​

​

//forme de l'objet

function Shape(x1, y1, x2, y2, h, c1, c2) {

  this.x1 = x1;

  this.y1 = y1;

  this.x2 = x2;

  this.y2 = y2;

  this.h = h;

// point de départ

  this.c1 = c1;

// pooitn d'arrivé

  this.c2 = c2;

  this.b = 1;

// couleurs aléatoir à l'étape 3 / rapel console.log/ 

  if (state >= 3) {

    console.log("-------------------- state 3 --------------------------")

    this.c1 = color(random(liste1));

    this.c2 = color(random(liste2))

  }

  if (state == 1){

      var shapeColor = color(0,0,0)

    //choix des couleurs

      if (key == "1") shapeColor = color(255, 0, 0);

      if (key == "2") shapeColor = color(0, 255, 0);

      if (key == "3") shapeColor = color(0, 0, 255);

     if (key == "4") shapeColor = color("pink");

     if (key == "5") shapeColor = color("orange");

     if (key == "6") shapeColor = color("white");

     if (key == "7") shapeColor = color("rgb(190,50,177)");

     if (key == "8") shapeColor = color("rgb(131,252,176)");

     if (key == "9") shapeColor = color("rgb(207,207,207)");

      this.c1= shapeColor

     }

​

// orientation aléatoire à partir de l'étape 2

  this.a = 0;

  if (state >= 2) {

    this.a = radians(random(0, 360));

  }

  //same étape2

  if (state >= 3) {

    this.a = radians(random(0, 360));

  }

  //positionement lors du dessin>>> principe de l'objet orienté> outils

  //variation pour décider de l'orientation que va prendre le dégradé

  Shape.prototype.draw = function () {

    var w = dist(this.x2, this.y2, this.x1, this.y1);

    var a = 0;

  // changement de cette orientation lorsque le temps atteint l'étape 2

    if (this.a == 0) {

      a = atan2(this.y2 - this.y1, this.x2 - this.x1);

    } else {

      a = this.a;

    }    

​

    //stroke(this.c);

    push();

    translate(this.x1, this.y1);

    rotate(a);

    translate(0, -this.h / 2);

    for (var i = 0; i < w; i += density) {

      stroke(lerpColor(this.c1, this.c2, map(i, 0, w, 0, 1)));

      line(i, 0, i, 50);

    }

    pop();

  };

}

​